<template>
    <div class="form">
        <section class="body">
            <p class="hedd-text">患者家庭车辆财产状况</p>
            <div class="smallTitle">是否有汽车？</div>
            <van-tabs type="card" v-model="car">
                <van-tab title="有" name="yes">
                    <div class="smallTitle">
                        车产数量（辆）
                        <div class="stepper">
                            <van-stepper v-model="num01" />
                        </div>
                    </div>
                    <van-field
                        v-model="money01"
                        type="number"
                        placeholder="车产总价值(万元)"
                        maxlength="10"
                    />
                    <div class="smallTitle">车产状态</div>
                    <van-tabs type="card" v-model="type">
                        <van-tab title="已变卖" name="Already">
                            <div class="smallTitle">
                                已变卖数量（辆）
                                <div class="stepper">
                                    <van-stepper v-model="num02" />
                                </div>
                            </div>
                            <van-field
                                v-model="money02"
                                type="number"
                                placeholder="已变卖价值(万元)"
                                maxlength="10"
                            />
                        </van-tab>
                        <van-tab title="变卖中" name="Being">
                            <div class="smallTitle">
                                变卖中数量（辆）
                                <div class="stepper">
                                    <van-stepper v-model="num03" />
                                </div>
                            </div>
                            <van-field
                                v-model="money03"
                                type="number"
                                placeholder="变卖中价值(万元)"
                                maxlength="10"
                            />
                        </van-tab>
                        <van-tab title="未变卖" name="none"></van-tab>
                    </van-tabs>
                </van-tab>
                <van-tab title="无" name="no"></van-tab>
            </van-tabs>
        </section>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="submit"
            >下一步</van-button>
        </footer>
    </div>
</template>

<script>
import { Field, Button, Toast, Tab, Tabs, Stepper } from "vant";
export default {
    components: {
        [Field.name]: Field,
        [Button.name]: Button,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Stepper.name]: Stepper
    },
    data() {
        return {
            car: "no",
            num01: "",
            money01: "",
            type: "none",
            num02: "",
            money02: "",
            num03: "",
            money03: ""
        };
    },
    methods: {
        submit() {}
    }
};
</script>

<style scoped>
.smallTitle {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 14px;
    height: 24px;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 20px;
}
.stepper {
    font-weight: 400;
}
</style>